<template>
  <el-tabs v-model="activeName" type="card" @tab-click="handleTabClick">
    <template v-for="item in optList">
      <el-tab-pane :key="item.code" :name="item.code" :label="item.name">
        <component :is="item.component" v-if="item.code === activeName" />
      </el-tab-pane>
    </template>
  </el-tabs>
</template>
<script>
import gameList from './gameList';
import otherGameList from './otherGameList';
import topGameList from './topGameList';
export default {
  data() {
    return {
      activeName: '',
      gameType: '',
      optList: [
        {
          code: 'own',
          name: '本部赛事',
          component: gameList
        },
        {
          code: 'other',
          name: '其他赛事',
          component: otherGameList
        },
        {
          code: 'top',
          name: '我的置顶',
          component: topGameList
        }
      ]
    };
  },
  created() {
    this.activeName = this.$route.query.type || 'own';
  },
  methods: {
    handleTabClick(tabItem) {
      this.gameType = this.$route.query.gameType || 'GameManage';
      this.$router.push({
        name: 'GameManage',
        query: {
          type: tabItem.name,
          gameType: this.gameType
        }
      });
    }
  }
};
</script>
